<template>
  <div class="flex align_center">
    <div class="px_8">
      <span class="fontsize_12 pr_6">参考线</span>
      <el-switch size="small" :width="32"></el-switch>
    </div>

    <div class="line-right"></div>
    <el-popover placement="bottom" width="150" trigger="click"
      popper-class="header-popper" v-model:visible="alignVisiable">
      <template #reference>
        <div class="px_8">
          <el-tooltip placement="top" effect="dark" content="对齐">
            <span
              class="iconfont icon-juzuoduiqi cursor_point white fontsize_12 px_4"
              v-click-outside="closeAlignVisable"
              :class="areaData.components.length?'':'color_aaa not-allow'"
              @click="handleAlignVisiable"></span>
          </el-tooltip>
        </div>
      </template>
      <div class="scale-value-list">
        <div v-for="s in alignList" :key="s.value" class="scale-value-item"
          @click="changeAlignList(s.value)">
          <span class="iconfont " :class="s.icon"></span><span
            class="pl_8">{{ s.label }}</span>
        </div>
      </div>
    </el-popover>

    <el-popover placement="bottom" width="120" popper-class="header-popper"
      trigger="click" v-model:visible="moveVisiable">
      <template #reference>
        <div class="px_8">
          <el-tooltip placement="top" effect="dark" content="层级">
            <span
              class="iconfont icon-fuzhi cursor_point white fontsize_12 px_4"
              v-click-outside="closeMoveVisable"
              :class="curComponent?'':'color_aaa not-allow'"
              @click="handleMoveVisiable"></span>
          </el-tooltip>
        </div>
      </template>
      <div class="scale-value-list">
        <div v-for="s in zIndexList" :key="s.value" class="scale-value-item">
          <span class="iconfont " :class="s.icon"></span><span class="pl_8"
            @click="changeZIndexList(s.value)">{{ s.label }}</span>
        </div>
      </div>
    </el-popover>

    <div class="line-right"></div>

    <el-tooltip placement="bottom" effect="dark" content="组合">
      <div class="px_8">
        <span class="fontsize_12 iconfont icon-zuhe cursor_point white px_4"
          :class="areaData.components.length?'':'color_aaa not-allow'"
          @click="handleGroupComponent"></span>
      </div>
    </el-tooltip>
    <el-tooltip placement="bottom" effect="dark" content="分解">
      <div class="px_8">
        <span
          class="px_4 fontsize_12 iconfont icon-quxiaozuhe cursor_point white"
          :class="(curComponent && curComponent.type=== 'group')?'':'color_aaa not-allow'"
          @click="handleDecomposeComponent"></span>
      </div>
    </el-tooltip>

    <div class="line-right"></div>

    <el-tooltip placement="bottom" effect="dark" content="水平翻转">
      <div class="px_8">
        <span :class="curComponent?'':'color_aaa not-allow'"
          class="fontsize_12 iconfont icon-shuiping cursor_point white px_4"
          @click="handleCurFilpH"></span>
      </div>
    </el-tooltip>
    <el-tooltip placement="bottom" effect="dark" content="垂直翻转">
      <div class="px_8">
        <span :class="curComponent?'':'color_aaa not-allow'"
          class=" fontsize_12 iconfont icon-chuizhi cursor_point white px_4"
          @click="handleCurFilpV"></span>
      </div>
    </el-tooltip>

    <div class="line-right"></div>

    <el-tooltip placement="bottom" effect="dark" content="隐藏">
      <div class="px_8">
        <span :class="curComponent?'':'color_aaa not-allow'"
          class="fontsize_12 iconfont icon-yanjing-zhengyan cursor_point white px_4"
          @click="handleHideComponent"></span>
      </div>
    </el-tooltip>

    <el-tooltip placement="bottom" effect="dark" content="锁定">
      <div class="px_8">
        <span class="fontsize_12 iconfont icon-suo cursor_point white px_4"
          :class="curComponent?'':'color_aaa not-allow'"
          @click="handleLockedComponent"></span>
      </div>
    </el-tooltip>
  </div>
</template>

<script>
import { defineComponent, onMounted, ref, computed } from "vue";
import { useDesignStore } from "../../../../../store/design";
import { headerAlignList, zIndexDict } from "../../../../../utils/dict";

export default defineComponent({
  name: "header-toolbar",
  setup() {
    const alignList = ref([]);
    const zIndexList = ref([]);
    const designStore = useDesignStore();
    const moveVisiable = ref(false);
    const alignVisiable = ref(false);
    const areaData = computed(() => designStore.areaData);
    const areaComponentMap = computed(() => {
      let maps = {};
      if (
        Array.isArray(areaData.value.components) &&
        areaData.value.components.length
      ) {
        maps = areaData.value.components.reduce((pre, item) => {
          pre[item.id] = item;
          return pre;
        }, {});
      }
      return maps;
    });
    const handleAlignLeft = () => {
      //只有选中多项才执行
      if (areaData.value.components.length > 1) {
        let areaComponentMapValue = Object.values(areaComponentMap.value);
        let min = areaComponentMapValue.reduce(function (a, b) {
          return b.attr.left > a.attr.left ? a : b;
        });
        for (let key in areaComponentMap.value) {
          let component = areaComponentMap.value[key];
          component.attr.left = min.attr.left;
        }
      }
    };
    const handleAlignRight = () => {
      //只有选中多项才执行
      if (areaData.value.components.length > 1) {
        let attrs = Object.values(areaComponentMap.value);
        // 组件的x+组件的宽度最大的值就是需要对齐的最右边x坐标值
        let max = attrs.reduce(function (a, b) {
          return b.attr.left + parseFloat(b.attr.width) >
            a.attr.left + parseFloat(a.attr.width)
            ? b
            : a;
        });
        for (let key in areaComponentMap.value) {
          let component = areaComponentMap.value[key];
          component.attr.left =
            max.attr.left +
            parseFloat(max.attr.width) -
            parseFloat(component.attr.width);
        }
      }
    };
    const handleAlignTop = () => {
      //只有选中多项才执行
      if (areaData.value.components.length > 1) {
        let values = Object.values(areaComponentMap.value);
        let min = values.reduce(function (a, b) {
          return b.attr.top > a.attr.top ? a : b;
        });
        for (let key in areaComponentMap.value) {
          let component = areaComponentMap.value[key];
          component.attr.top = min.attr.top;
        }
      }
    };
    const handleAlignHorizontalMiddle = () => {
      //只有选中多项才执行
      if (areaData.value.components.length > 1) {
        let values = Object.values(areaComponentMap.value);
        let objX = values[0].attr.left + values[0].attr.width / 2;
        for (let key in areaComponentMap.value) {
          let component = areaComponentMap.value[key];
          component.attr.left = objX - component.attr.width / 2;
        }
      }
    };
    const handleAlignVerticalMiddle = () => {
      //只有选中多项才执行
      if (areaData.value.components.length > 1) {
        let values = Object.values(areaComponentMap.value);
        let objY = values[0].attr.top + values[0].attr.height / 2;
        for (let key in areaComponentMap.value) {
          let component = areaComponentMap.value[key];
          component.attr.top = objY - component.attr.height / 2;
        }
      }
    };
    const handleAlignBottom = () => {
      //只有选中多项才执行
      if (areaData.value.components.length > 1) {
        let values = Object.values(areaComponentMap.value);
        let max = values.reduce(function (a, b) {
          return b.attr.top > a.attr.top ? b : a;
        });
        for (let key in areaComponentMap.value) {
          let component = areaComponentMap.value[key];
          component.attr.top = max.attr.top;
        }
      }
    };
    const changeAlignList = (val) => {
      alignVisiable.value = false;
      switch (val) {
        case "left":
          handleAlignLeft();
          break;
        case "right":
          handleAlignRight();
          break;
        case "top":
          handleAlignTop();
          break;
        case "bottom":
          handleAlignBottom();
          break;
        case "horizontal-center":
          handleAlignHorizontalMiddle();
          break;
        case "vertical-center":
          handleAlignVerticalMiddle();
          break;
        default:
          break;
      }
    };
    const curComponent = computed(() => designStore.curComponent);
    const changeZIndexList = (val) => {
      moveVisiable.value = false;
      switch (val) {
        case "up":
          designStore.upComponent();
          designStore.addSnapshot();
          break;
        case "next":
          designStore.bottomComponent();
          designStore.addSnapshot();
          break;
        case "top":
          designStore.topComponent();
          designStore.addSnapshot();
          break;
        case "bottom":
          designStore.downComponent();
          designStore.addSnapshot();
          break;
        default:
          break;
      }
    };
    const handleMoveVisiable = () => {
      if (!curComponent.value) {
        return;
      }
      moveVisiable.value = !moveVisiable.value;
    };
    const closeMoveVisable = () => {
      moveVisiable.value = false;
    };
    const handleAlignVisiable = () => {
      if (!areaData.value.components.length) {
        return;
      }
      alignVisiable.value = !alignVisiable.value;
    };
    const closeAlignVisable = () => {
      alignVisiable.value = false;
    };
    const handleGroupComponent = () => {
      designStore.compose();
    };
    const handleDecomposeComponent = () => {
      designStore.decompose();
    };
    const handleHideComponent = () => {
      if (!curComponent.value) {
        return;
      }
      designStore.setCurcomponentHided();
    };
    const handleLockedComponent = () => {
      if (!curComponent.value) {
        return;
      }
      designStore.setCurcomponentLock();
    };
    const handleCurFilpV = () => {
      if (!curComponent.value) {
        return;
      }
      designStore.setCurcomponentFilpV();
    };
    const handleCurFilpH = () => {
      if (!curComponent.value) {
        return;
      }
      designStore.setCurcomponentFilpH();
    };
    onMounted(() => {
      alignList.value = headerAlignList;
      zIndexList.value = zIndexDict;
    });
    return {
      areaData,
      alignList,
      zIndexList,
      moveVisiable,
      alignVisiable,
      curComponent,
      areaComponentMap,
      closeMoveVisable,
      closeAlignVisable,
      handleAlignLeft,
      handleAlignRight,
      handleAlignTop,
      changeAlignList,
      changeZIndexList,
      handleAlignBottom,
      handleMoveVisiable,
      handleHideComponent,
      handleAlignVisiable,
      handleCurFilpV,
      handleCurFilpH,
      handleGroupComponent,
      handleLockedComponent,
      handleDecomposeComponent,
      handleAlignVerticalMiddle,
      handleAlignHorizontalMiddle,
    };
  },
});
</script>

<style>
.dark-theme .el-popper.is-light.header-popper {
  min-width: 100px;
}
</style>